<template>
  <div class="t-body">
    <div class="t-header" :class="checkTable? 't-header01': ''">
      <div>
        <span v-for="(item, index) in listHeader" :key="index">{{ item.name }}</span>
      </div>
    </div>
    <vue-seamless-scroll v-if="listData.length> 0" ref="table" :data="listData" :class-option="optionHover" class="seamless-warp" :style="{height: height}" :class="checkTable? 'seamless-warp01': ''">
      <ul ref="con1" class="con1">
        <li v-for="(item, index) in listData" :key="index" ref="contItem">
          <template v-if="checkTable">
            <el-tooltip v-if="item.proName" class="item" effect="dark" :open-delay="500" :content="item.proName" placement="top-start">
              <span class="to-link" @click="getProDetail(item.proId,item.status)">{{ item.proName }}</span>
            </el-tooltip>
            <span v-else>{{ item.proName }}</span>

            <span>{{ item.workload }}</span>
            <span>{{ item.finishWorkload }}</span>
            <span><i v-if="item.workload">{{ item.workload - item.finishWorkload }}</i></span>
            <span><i v-if="item.proName">{{ contractAmount(item.contractAmount) }}</i></span>
          </template>
          <template v-else-if="type === 'cooperation'">
            <el-tooltip v-if="item.name" class="item" effect="dark" :open-delay="500" :content="item.proName" placement="top-start">
              <span class="to-link" @click="getTeamDetail(item.id)">{{ item.name }}</span>
            </el-tooltip>
            <span v-else>{{ item.name }}</span>

            <span>{{ level(item.qualificationLevel) }}</span>
            <span>{{ item.area && getRegionCode(item.province,item.city,item.area) }}</span>
          </template>
          <template v-else>
            <el-tooltip v-if="item.proName" class="item" effect="dark" :open-delay="500" :content="item.proName" placement="top-start">
              <span class="to-link" @click="getProDetail(item.id,item.status)">{{ item.proName }}</span>
            </el-tooltip>
            <span v-else>{{ item.proName }}</span>

            <span>{{ level(item.grade) }}</span>
            <span><i v-if="item.proName">{{ contractAmount(item.contractAmount) }}</i></span>
          </template>
        </li>
      </ul>
    </vue-seamless-scroll>
    <div v-else class="no-data" :style="{height: height}">
      <p><svg-icon icon-class="no-data" class="no-data-icon" /></p>
      <p>暂无数据</p>
    </div>
  </div>
</template>

<script>
import { listRegionTree } from '@/api/common/area'
export default {
  name: 'ProjectTable',
  props: {
    type: {
      type: String,
      default: ''
    },
    proGrade: { // 项目等级
      type: Array,
      default: () => []
    },
    listData: { // 表格数据
      type: Array,
      default: () => []
    },
    listHeader: { // 表头
      type: Array,
      default: () => []
    },
    height: { // 表格高度
      type: String,
      default: '220px'
    },
    limitMoveNum: { // 开始无缝滚动的数据量
      type: Number,
      default: 7
    }
  },
  data() {
    return {
      cityList: [],
      checkTable: false,
      contItemHeight: '',
      needNum: 7
    }
  },
  computed: {
    optionHover() {
      return {
        step: 0.55, // 数值越大速度滚动越快
        limitMoveNum: this.needNum + 1,
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
      }
    },
    level() {
      return level => this.selectDictLabel(this.proGrade, level)
    },
    getRegionCode() {
      return (province, city, area) => {
        const sheng = this.cityList.find(sheng => sheng.value === province)
        if (!sheng) return
        const shi = sheng.children.find(shi => shi.value === city)
        const xian = shi.children.find(xian => xian.value === area)
        return (sheng.label + shi.label + xian.label) || ''
      }
    },
    contractAmount() {
      return contractAmount => this.divideMoney(contractAmount, 6, true)
    }
  },
  watch: {
    listHeader: {
      immediate: true,
      deep: true,
      handler(val) {
        this.checkTable = val.length > 3
      }
    },
    listData: {
      immediate: true,
      deep: true,
      handler(val) {
        if (val.length > 0) {
          this.needNum = Math.floor(parseInt(this.height) / 36)
          this.addTaleData(val.length, this.needNum)
        }
      }

    }
  },
  mounted() {
    this.listRegionTree()
  },
  methods: {
    getProDetail(id, proStatus) {
      if (!id) return
      this.$store.commit('basicInfo/SET_ProId', id)
      this.$store.commit('basicInfo/SET_ProStatus', proStatus)
      this.$router.push({
        path: '/newProject/project-detail'
      })
    },
    getTeamDetail(id) {
      if (!id) return
      this.$router.push({
        path: '/sysEnterprise/cooperativeEnterprise',
        query: {
          id: id
        }
      })
    },
    async listRegionTree() {
      const { data } = await listRegionTree()
      this.cityList = data
    },
    // 补空白行
    addTaleData(listDataLength, needNum) {
      if (listDataLength < needNum) {
        const arr = {}
        this.listData.push(arr)
        this.addTaleData()
      }
    }
  }
}
</script>

<style scoped lang="scss">
  @mixin span($width:50%,$width01:30%,){
    &:first-child{
      width: $width;
    }
    &:last-child{
      width: $width01;
    }
  }
  .t-body{
    .t-header{
      span{
        width: 20%;
        @include span(40%, 40%)
      }
    }
    .t-header01{
      span{
        @include span(30%, 20%)
      }
    }
    .seamless-warp{
      .con1 {
        li{
          span{
            width: 20%;
            @include span(40%, 40%);
            i{
              font-style: normal;
            }
          }
        }
      }
    }
    .seamless-warp01{
      .con1{
        li{
          span{
            width: 16.6%;
            @include span(30%, 20%)
          }
        }
      }
    }
  }
</style>
